<template>
  <div class="discover">
      <Navi :title="'头条'" :flexd="true" />
    <div class="himg">
      <img class="auto-img" src="../assets/toutiao.png" alt="" />
    </div>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="(item1, index) in list1" :key="index">
            <div class="product" @click="viewAudio(list3[index].id)">
              <div class="img-box">
                <img
                  class="auto-img"
                  :src="'https://imagev2.xmcdn.com/' + cover[index]"
                  alt=""
                />
              </div>
              <div class="textbox">
                <div class="product-name one-text">
                  {{ t[index] }}
                </div>
                <div class="product-enname one-text">
                  {{
                    ent[index] === ""
                      ? "中国文学史上第一部章回小说，是历史演义小说的开山之作"
                      : ent[index]
                  }}
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Discover",
  components: {
    Navi,
  },
  data() {
    return {
      url: "https://imagev2.xmcdn.com/",
      list: [],
      list1: [],
      list3: [],
      cover: [],
      t: [],
      ent: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  created() {
    this.gettou();
  },
  methods: {
    gettou() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/ximalaya/rank/queryRank?clusterCode=hotplay&categoryCode=toutiao",
      })
        .then((result) => {
          this.$toast("加载完成");
          this.list = result.data.data.rankModuleInfoList;
          this.list3 = [];
          this.t = [];
          this.ent = [];
          this.cover = [];
          this.list.forEach((v) => {
            this.list3.push(v.albumInfo);
            this.list3.forEach((i) => {
              this.t.push(i.title);
              this.ent.push(i.customTitle);
            });
            this.cover.push(v.albumInfo.cover);
          });
        })
        .catch((err) => {
          
        });
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list1 = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 20; i++) {
          this.list1.push(this.list1.length + 1);
        }

        this.loading = false;

        if (this.list1.length > 79) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    viewAudio(trackid) {
      this.$router.push({ name: "Audio", params: { trackid } });
    }
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-bottom: 50px;
  .van-cell {
    padding: 5px;
  }
  .product {
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    .img-box {
      width: 90px;
      height: 90px;
    }
    .textbox {
      width: 283px;
      height: 100%;
      background-color: #f5f5f5;
      padding: 0 0 0 10px;
      box-sizing: border-box;
      .product-name {
        width: 100%;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
      .product-enname {
        width: 100%;
        font-size: 14px;
        color: #333;
        margin-top: 10px;
      }
    }
  }
}
</style>